<template>
  <view class="bg-white query-form">
    <up-form :model="queryForm">
      <up-form-item label="门店" prop="shopId" @click="handleShopClick">
        <up-input v-model="currentShopName" border="surround" readonly/>
      </up-form-item>
      <up-form-item label="日期" prop="date" @click="handleDateClick">
        <up-input v-model="queryForm.date" border="surround" readonly/>
      </up-form-item>
      <up-form-item>
        <up-button text="查询" type="primary" @click="handleButtonClick"/>
      </up-form-item>
    </up-form>
  </view>
  <up-list>
    <up-list-item v-for="schedule in schedules" :key="schedule.userid">
      <view class="bg-white">
        <up-cell
            :title="schedule.username"
            :value="schedule.full_work !== undefined ? translateFullWork(schedule.full_work): undefined"
            is-link
            @click="handleCellClick(schedule)"
        />
      </view>
    </up-list-item>
  </up-list>
  <up-calendar
      :default-date="queryForm.date"
      :show="isCalendarShow"
      min-date="2024-12-01"
      @close="handleCalendarClose"
      @confirm="handleCalendarConfirm"
  />
  <shop-picker v-model:shop-id="queryForm.shopId" v-model:shop-name="currentShopName" v-model:show="isShopPickerShow"/>
</template>

<script lang="ts" setup>
import {ref} from "vue"
import {onPullDownRefresh} from "@dcloudio/uni-app";
import {getScheduleByShopIdAndDate} from "@/api/scuedule";
import {LOADING} from "@/constant/loading";
import ShopPicker from "@/components/picker/ShopPicker.vue";
import {storeToRefs} from "pinia";
import {useScheduleStore} from "@/store/schedule";
import type ScheduleResponse from "@/api/types/schedule/ScheduleResponse";
import {translateFullWork} from "@/api/types/schedule/translate";

const {scheduleToView} = storeToRefs(useScheduleStore())

const schedules = ref<ScheduleResponse[]>([])
const today = new Date()
const queryForm = ref<{ shopId?: number, date: string }>({
  date: `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`,
})
const currentShopName = ref<string>()
const isCalendarShow = ref(false)
const isShopPickerShow = ref(false)
let isLoadFromPullDown = false

async function getData() {
  if (!isLoadFromPullDown) {
    await uni.showLoading({title: LOADING})
  }
  if (queryForm.value.shopId !== undefined) {
    const {data} = await getScheduleByShopIdAndDate(queryForm.value.shopId, queryForm.value.date)
    if (data.data !== undefined) {
      schedules.value = data.data
      if (!isLoadFromPullDown) {
        uni.hideLoading()
      }
    }
  }
}

// onLoad(async (query) => {
//   if (query?.attendanceGroupId !== undefined && queryForm.value.date !== undefined) {
//     attendanceGroupId.value = query.attendanceGroupId
//     await getData()
//   }
// })

async function handleButtonClick() {
  await getData()
}

async function handleCalendarClose() {
  isCalendarShow.value = false
}

function handleDateClick() {
  isCalendarShow.value = true
}

async function handleCellClick(schedule: ScheduleResponse) {
  scheduleToView.value = schedule
  await uni.navigateTo({url: "/pages/admin/schedule/employee"})
}

async function handleCalendarConfirm([date]: [string]) {
  queryForm.value.date = date
  isCalendarShow.value = false
}

function handleShopClick() {
  isShopPickerShow.value = true
}

onPullDownRefresh(async () => {
  isLoadFromPullDown = true
  await getData()
  uni.stopPullDownRefresh()
  isLoadFromPullDown = false
})
</script>
<style lang="scss" scoped>
.bg-white {
  background-color: white;
}

.query-form {
  padding: 10px;
}
</style>
